import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);
// 同步引入
// import home from "../views/routerrr/home/home.vue";
// import my from "../views/routerrr/my/my.vue";
// import car from "../views/routerrr/car/car.vue";

// 异步引入

const home = () => import("../views/routerrr/home/home.vue");
const my = () => import("../views/routerrr/my/my.vue");
// const car = () => import("../views/routerrr/car/car.vue");
const notfind = () => import("../views/routerrr/undefined/undefined.vue");
const login = () => import("../views/routerrr/my/login.vue");
const clear = () => import("../views/routerrr/my/clear.vue");

const UserInfo = {
  render: (h) => {
    return <div>用户信息{h}</div>;
  },
};
const Car = () => import("../views/routerrr/car/shoppingCar.vue");

const routes = [
  {
    path: "/home/",
    component: home,
    name: "home",
    beforeEnter: (to, from, next) => {
      console.log("独享路由守卫");
      console.log(to, from, next);
      next();
    },
  },
  {
    name: "my",
    props: true, // 开启组件传参
    path: "/my/",
    component: my,
    children: [
      {
        path: "/my/userinfo",
        component: UserInfo,
      },
      {
        path: "/my/login",
        component: login,
      },
      { path: "/my/clear", component: clear },
    ],
  },
  // { path: "/car/:id", component: car },
  { path: "*", component: notfind },
  { path: "/", redirect: "/home" },
  { path: "/car", component: Car },
];
const router = new VueRouter({
  routes,
});

// 全局前置守卫（拦截器）
router.beforeEach((to, from, next) => {
  if (to.path && to.path === "/car") {
    console.log("判断中......");
    console.log(localStorage.getItem("token"));
    if (localStorage.getItem("token")) {
      next();
      console.log("有用户信息");
    }
  } else {
    next();
  }
});

export default router;
